<template>
    <div>
        <el-dialog
            title="添加地区"
            :visible.sync="dialogVisible"
            width="880px"
        >
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="地区:" prop="region">
                    <div :style="{width:'100%',height:'100%'}">
                        <baidu-map id="map" :style="{width:'100%',height:'320px'}" :center="{lng:109.07566,lat:35.4696}"
                                   :zoom="zoom" @ready="mapReady1">
                            <bm-polygon :path="polygonPath" stroke-color="blue"
                                        :stroke-opacity="0.5"
                                        :stroke-weight="2"
                                        :editing="true" @lineupdate="updatePolygonPath"/>
                        </baidu-map>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reset" size="small">重 置</el-button>
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {addFarm} from "@/index/api/index/adoption/farm/farm"
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                longitude1: "",
                latitude1: "",
                region: "",
            },
            fileList: [],
            BMap: null,
            point: null,
            zoom: 3,
            polygonPath: [],
            center: [109.07566, 35.4696],
            loading: false
        }
    },
    computed: {
        ...mapState(["token"]),
    },
    methods: {
        reset() {
            this.polygonPath = []
        },
        cancel() {
            this.dialogVisible = false;
            this.polygonPath = [];
            this.$refs["form"].resetFields();
            this.form.longitude = "";
            this.form.latitude = "";
        },
        showDialog() {
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            this.$emit("onSubmit", this.polygonPath)
            this.dialogVisible = false;
            this.$message.success("添加成功")
        },
        mapReady1({BMap, map}) {
            this.point = new BMap.Point(this.center[0], this.center[1]);
            map.centerAndZoom(this.point, 7)
            map.enableDragging();   // 启用地图拖拽
            map.enableScrollWheelZoom(); // 启用滚轮缩放
            this.map = map;
            this.BMap = BMap;
            map.addEventListener("click", (e) => {
                // 获取点击位置的经纬度
                this.form.longitude1 = e.point.lng;
                this.form.latitude1 = e.point.lat;
                this.addPolygonPoint();
            });
        },
        updatePolygonPath(e) {
            this.polygonPath = e.target.getPath()
        },
        addPolygonPoint() {
            this.polygonPath.push({lng: this.form.longitude1, lat: this.form.latitude1})
            this.form.region = JSON.stringify(this.polygonPath);
        },
    }
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
